import React, { useState, useContext, useEffect, useCallback } from 'react'
import { View, Image } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import Taro, { useRouter } from '@tarojs/taro'

import minipetContext from '../../context/minipet-db'
import { DetailWrap } from './styledDetail'

import "taro-ui/dist/style/components/button.scss" // 按需引入

export default function Detail() {
  let router = useRouter()
  let [info, setInfo] = useState(null)
  let minipet = useContext(minipetContext)

  useEffect(() => {
    const _id = router.params.id
    minipet.where({
      _id
    }).get({
      success: (res) => {
        setInfo(res.data[0])
      }
    })
  }, [router])

  const handleBackTap = useCallback(
    () => {
      Taro.navigateBack()
    },
    [],
  )

  return (
    info && (
      <DetailWrap>
        <View class="detail-wrap">
          <View class="item">
            <View class="label">
              我的地址
            </View>
            <View class="content">
              {info.address}
            </View>
          </View>
          <View class="item">
            <View class="label">
              类型
            </View>
            <View class="content">
              {
                info.type && <Image style="width: 40px; height: 40px;" mode="scaleToFill" src={`../../assets/images/${info.type}.png`}></Image>
              }
            </View>
          </View>
          <View class="item">
            <View class="label">
              说明
            </View>
            <View class="content">
              {info.message}
            </View>
          </View>
          <View class="item">
            <View class="label">
              联系方式
            </View>
            <View class="content">
            {info.contact}
            </View>
          </View>
          <View class="btn">
            <AtButton onClick={handleBackTap}>返回</AtButton>
          </View>
        </View>
      </DetailWrap>
    )
  )
}
